<template>
	<view class="order_listpage" :class="{isoff:offer_closed==1}">
		<view class="order_top" >
			<view class="order_type_tab flex ali-c" v-if="offer_closed==0">
				<view class="order_type" @tap="tab_type(1)" :class="{active:typeactive==1}">族谱订单</view>
				<view class="order_type" @tap="tab_type(2)" :class="{active:typeactive==2}">祭拜订单</view>
			</view>
			
			<view class="order_status_tab flex ali-c" v-if="typeactive==1">
				<view class="order_status_item flex1" @tap="taggle_tab_status(item)" :class="{actives:tabactive==item.status}" v-for="(item,index) in order_status" :key="index">{{item.status_name}}</view>
			</view>
			<view class="order_status_tab flex ali-c" v-if="typeactive==2">
				<view class="order_status_item flex1" @tap="taggle_type_status(item)" :class="{actives:tabactive==item.status}" v-for="(item,index) in tribute_status" :key="index">{{item.status_name}}</view>
			</view>
		</view>
		
		<!-- 族谱订单列表 -->
		<view class="order_data_list" v-if="typeactive==1">
			<view @tap="ToOrderdetaile(item)" class="order_data_item" v-for="(item,index) in order_datas_list" :key="index">
				<view class="order_data_item_hds flex ali-c jus-b">
					<view class="order_timess">订单日期：{{item.createtime | parsetime}}</view>
					<view class="goods_order_status">{{item.status}}</view>
				</view>
				<view class="order_data_item_bodys">
					<view class="order_info_main flex1 flex ali-c" >
						<view class="goodsimg">
							<image class="goodsimgurl" :src="photo_cdn1+'zpupload/20230720/482f6631a2445d82c6.png'" mode=""></image>
						</view>
						<view class="goods_info_str flex1">
							<view class="goods_title twoline">{{item.memo}}</view>
							<view class="flex jus-b ali-c">
								<view class="paymoneyss">实付款：￥{{item.payamount}}</view>
								<view class="goods_nums">x 1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
					
			<empty v-if="order_datas_list.length==0" ></empty>
			<!-- 暂无订单 -->	
		</view>
		
		<!-- 祭拜订单列表 -->
		<view class="order_data_list" v-if="typeactive==2">
			<view @tap="ToTributedetaile(item)" class="order_data_item" v-for="(item,index) in tribute_datas_list" :key="index">
				<view class="order_data_item_hds flex ali-c jus-b">
					<view class="order_timess">订单日期：{{item.createtime}}</view>
					<view class="goods_order_status">{{item.pl_status}}</view>
				</view>
				<view class="order_data_item_bodys">
					<view class="order_info_main flex1 flex ali-c" >
						<view class="goodsimg">
							<image class="goodsimgurl" :src="photo_cdn1+item.photo" mode=""></image>
						</view>
						<view class="goods_info_str flex1">
							<view class="goods_title twoline">{{item.title}}</view>
							<view class="flex jus-b ali-c">
								<view class="paymoneyss">实付款：￥{{item.need_pay}}</view>
								<view class="goods_nums">x 1</view>
							</view>
						</view>
					</view>
				</view>
			</view>
					
			<empty v-if="tribute_datas_list.length==0" ></empty>
			<!-- 暂无订单 -->	
		</view>
	</view>
</template>

<script>
	import {getRechargeList,worshipOrderList} from "@/utils/api/order.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	import {upgrade} from "@/utils/api/api.js";
	export default {
		data(){
			return {
				staticurl,
				photo_cdn1,
				tabactive:"",//订单列表  选中的订单状态
				typeactive:1,//订单类型 1族谱订单 2祭拜订单
				order_status:[
					{status:"",status_name:"全部",},
					{status:"created",status_name:"待支付",},
					{status:"paid",status_name:"已支付",},
					{status:"expired",status_name:"已失效",}
				],
				tribute_status:[//贡品订单类型
					{status:0,status_name:"全部",},
					{status:1,status_name:"未支付",},
					{status:2,status_name:"已支付",},
					{status:3,status_name:"已退款",}
				],
				page:0,
				order_datas_list:[],//族谱订单
				tribute_datas_list:[],//祭拜订单
				isshowall:false,
				offer_closed:1,
			}
		},
		onLoad() {
			this.orderListfun();
			
			this.upgradefun();
		},
		onReachBottom() {
			if(!this.isshowall){
				this.orderListfun();
			}else{
				this.$api.msg("没有更多了~");
			}
		},
		methods:{
			upgradefun(){
				upgrade({
					
				}).then((res)=>{
					if(res.code==1){
						this.offer_closed = res.data.offer_closed;
						// #ifdef MP-WEIXIN
						this.offer_closed = 0;
						// #endif
					}
				})
			},
			tab_type(type){
				if(this.typeactive == type){
					return false;
				}
				this.typeactive = type;
				if(type==1){
					this.tabactive = ''
					this.page = 0;
					this.tribute_datas_list = [];
					this.isshowall = false;
					this.orderListfun();
				}else if(type==2){
					this.tabactive = 0;
					this.page = 0;
					this.order_datas_list = [];
					this.isshowall = false;
					this.worshipOrderListfun();
				}
				console.log(this.tabactive)
			},
			//族谱订单
			taggle_tab_status(data){
				if(this.tabactive == data.status){//防止重复点击~
					return false;
				}
				this.tabactive = data.status;
				this.page = 0;
				this.order_datas_list = [];
				this.isshowall = false;
				this.orderListfun();
			},
			//祭拜订单
			taggle_type_status(data){
				if(this.tabactive == data.status){//防止重复点击~
					return false;
				}
				this.tabactive = data.status;
				console.log(this.tabactive)
				console.log(typeof(this.tabactive))
				this.page = 0;
				this.tribute_datas_list = [];
				this.isshowall = false;
				this.worshipOrderListfun();
			},
			
			//获取族谱订单列表
			orderListfun(){
				this.page++;
				getRechargeList({
					page:this.page,
					status:this.tabactive,
				}).then((res)=>{
					if(res.code==1){
						this.order_datas_list = [...this.order_datas_list,...res.data.list]
						if(res.data.list.length==0){
							this.isshowall = true;
						}
					}else{
						this.isshowall = true;
					}
				})
			},
			//获取祭拜订单列表
			worshipOrderListfun(){
				this.page++;
				worshipOrderList({
					page:this.page,
					status:this.tabactive,
				}).then(res=>{
					if(res.code==1){
						this.tribute_datas_list = [...this.tribute_datas_list,...res.data.order_list];
						if(res.data.order_list.length==0){
							this.isshowall = true;
						}
					}else{
						this.isshowall = true;
					}
					// this.$api.msg(res.msg)
				})
			},
			ordertimetap(dataitem,btn_item){
				if(btn_item.way=='orderDetails'){
					//订单详情
					
				}else if(btn_item.way=='affirmReceiving'){
					
				}else if(btn_item.way=='checkLogistics'){
					//查看物流
					
				}
			},
			//查看订单详情~
			ToOrderdetaile(item){
				uni.navigateTo({
					url:`/pages/zupu/my_order_detaile/my_order_detaile?order_id=${item.id}&source=1`
				})
			},
			ToTributedetaile(item){
				uni.navigateTo({
					url:`/pages/zupu/my_order_detaile/my_order_detaile?order_id=${item.id}&source=2`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./my_order.scss";
</style>